<template>
  <ul class="hot-list">
    <li v-for="(doc, index) in props.list" :key="doc.id"
        @mouseenter="activeHotIndex = index"
        @mouseleave="activeHotIndex = null"
        @click="emit('docClick', doc.id)">
      <span href="#" class="hot-item">
        <span class="num">{{ index + 1 }}</span>
        <p>{{ doc.name }}</p>
      </span>
      <span v-if="shouldShowInfo(index)" href="" class="item-info">
        <div class="item-info-img">
          <img :src="doc.coverUrl">
        </div>
        <div class="item-info-text">
          <p :title="doc.gradeName">栏目：{{ doc.gradeName }}</p>
          <p :title="doc.createTime">上传时间：{{ doc.createTime.slice(0, 10) }}</p>
          <p :title="doc.subjectName">标签：{{ doc.subjectName }}</p>
          <p :title="doc.authorName">作者：{{ doc.authorName }}</p>
          <p :title="doc.coin+'知币'">价格：{{ doc.coin }}知币</p>
        </div>
      </span>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import * as HomeApi from '@/api/home'

const props = defineProps<{
  list: HomeApi.HotDocData[]
}>()

const emit = defineEmits<{
  docClick: [id: string | number]
}>()

const activeHotIndex = ref<number | null>(null)

const shouldShowInfo = (index: number) => {
  return activeHotIndex.value === null ? index === 0 : activeHotIndex.value === index
}

</script>
<style scoped>
.hot-list {
  list-style: none;
  padding: 0;
}

.hot-item {
  font-size: 14px;
  color: #666;
  display: flex;
  text-decoration-line: none;
  align-items: center;
}

.hot-list li:hover .hot-item {
  color: dodgerblue;
}

.hot-item .num {
  display: inline-flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 18px;
  background-color: #e0e0e0;
  border-radius: 50%;
  color: #fff;
}

/* 使用 nth-child 选择器为前3名设置特殊背景色 */
.hot-list li:nth-child(1) .hot-item .num {
  background-color: #ea9393; /* 第1名：红色 */
}

.hot-list li:nth-child(2) .hot-item .num {
  background-color: #f5b988; /* 第2名：橙色 */
}

.hot-list li:nth-child(3) .hot-item .num {
  background-color: #f5d588; /* 第3名：黄色 */
}

.hot-list li {
  min-height: 35px !important;
  cursor: pointer;
}

.hot-item p {
  display: block;
  unicode-bidi: isolate;
  height: 22px;
  margin: 0 0 0 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  max-width:330px;
}

.item-info {
  display: flex;
  text-decoration: none;
  color: #999;
  padding-bottom: 5px;
}

.item-info-img {
  width: var(--item-img-width, 160px);
  height: var(--item-img-height, 90px);
  display: block;
  box-sizing: border-box;
}

.item-info-img img {
  border: 1px solid #DADDDF;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

.item-info-text {
  width:var(--item-info-text-width, 140px);
  height: 90px;
  font-size: 12px;
  margin-left: 10px;
}

.item-info-text p {
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

}
</style>
